<template>
	<xn-form-container :title="searchFormState.batchNumber" :width="1500" :visible="visible" :destroy-on-close="true"
					   @close="onClose">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="手机号" name="phone">
						<a-input
							v-model:value="searchFormState.phone"
							placeholder="请输入手机号"
							allow-clear
						/>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-space>
						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
						<a-button @click="searchFormRef.resetFields()">重置</a-button>
					</a-space>
				</a-col>
			</a-row>
		</a-form>
		<s-table
			ref="tableRef"
			:columns="columns"
			:data="loadData"
			:pagination="false"
			:row-key="(record) => record.id"
			:scroll="{ x: 'max-content' }"/>
	</xn-form-container>
</template>

<script setup>
// 默认是关闭状态
import predictCallApi from "@/api/tjzy/call/predict/predictCallApi";

const visible = ref(false)
const emit = defineEmits({successful: null})
const dataSource = ref([])
const searchFormRef = ref();
const tableRef = ref();
const searchFormState = ref({
	batchNumber: undefined,
	phone: undefined
});
const columns = [
	{
		title: '联系人姓名',
		dataIndex: 'liaisonName'
	},
	{
		title: '联系人电话',
		dataIndex: 'liaisonPhone'
	},
	{
		title: '甲方系统主键',
		dataIndex: 'partnerBusinessId',
		ellipsis: true
	},
	{
		title: '自定义客户信息',
		dataIndex: 'customerInfo'
	},
	{
		title: '任务ID',
		dataIndex: 'taskId',
		ellipsis: true
	},
	{
		title: '客户振铃时间',
		dataIndex: 'ringTime'
	},
	{
		title: '通话时长',
		dataIndex: 'callDuration'
	}
]
// 打开抽屉
const onOpen = (record) => {
	visible.value = true
	searchFormState.value.batchNumber = record.batchNumber
}
// 关闭抽屉
const onClose = () => {
	visible.value = false
	dataSource.value = []
}
const loadData = (parameter) => {
	searchFormState.value.current = parameter.current;
	searchFormState.value.size = parameter.size;
	return predictCallApi.pageDetail(searchFormState.value).then((res) => {
		return res;
	});
};
// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
	onOpen
})
</script>
